<template>
  <div class="setting-card">
    <div class="setting-card-top">
      <div class="title">{{ title }}</div>
      <div v-if="mark" class="limit">{{ mark }}</div>
    </div>
    <div :class="(mark || singleStyle) ? '':'setting-options'">
      <div 
        v-for="(setting, index) in settingList || []"
        :key="index"
        class="setting-item"
        :class="singleStyle && index < 2 ? 'setting-item-single' :''"
      >
        <el-checkbox 
          :value="setting.value" :name="setting.name" @input="changeSettingItem($event, setting)" :label="setting.label"
        ></el-checkbox>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'setting-card',
  props: {
    settingOptions: {
      type: Object,
      default: ()=>{}
    },
    singleStyle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  computed: {
    title() {
      return this.settingOptions?.label
    },
    limit() {
      return this.settingOptions?.limit
    },
    settingList() {
      return this.settingOptions?.items
    },
    mark() {
      return this.settingOptions?.mark
    }
  },
  methods: {
    changeSettingItem (value, setting) {
      let limit = this.limit;

      // 该分组下属选项没有没有限制时 或 进行取消操作时, 允许操作
      if (!limit || !value) {
        setting.value = value;
        return;
      }

      // 有限制，进行选择操作时 仅选择后<=limit可行
      let selectedLength = this.settingList.filter(setting => setting.value === true).length;
      if (selectedLength + 1 <= limit) {
        setting.value = value;
        return;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.setting-card {
    width: 100%;
    padding: 8px 10px 10px 10px;
    background-color: #F0F0F0;
    &-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 20px;
        .title {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #262626;
        }
        .limit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #BFBFBF;
        }
    }
    .setting-options {
        display: flex;
        flex-wrap: wrap;
    }
    .setting-item {
      width: 50%;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #595959;
      line-height: 22px;
      margin-top: 8px
    }
    .setting-item-single {
      display: inline-block
    }
}
</style>